<template>
	<view class="container">
		<view v-if="showSteps">
			<uni-steps :options="[{title: '已审核'}, {title: '已调度'}, {title: '已出发'}, {title: '已确认'}]" :active="1"></uni-steps>
		</view>
		<view class="content-container">
			<view class="item" style="display: flex;">
				<view><van-icon name="location" /></view>
				<text class="info-text ellipsis">中国核动力研究设计院国核动力研究设计国核动力研究设计国核动力研究设计国核动力研究设计</text>
			</view>
			<view class="item">
				<view><van-icon name="clock" /></view>
				<text class="info-text">2020年3月1日</text>
			</view>
			<view class="item">
				<view><van-icon name="manager" /></view>
				<text class="info-text">张三  18988889999</text>
				
				<!-- <text style="font-size: 12px;">8分钟前</text> -->
			</view>
			<view class="item">
				<view><van-icon name="coupon" /></view>
				<text class="info-text">U121212</text>
			</view>
			
			<text class="msg-time">8分钟前</text> 
			<view  v-if="!showSteps && data.status != 3" class="check-status">
				<text>待审核</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			data: Object,
			showSteps: Boolean
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
.container{
	border-radius: 6px;
	background-color: $uni-bg-color;
	padding: 10px;
	margin: 15px 15px;
	box-shadow: 0px 1px 3px 0px rgb(204, 204, 204) ;
	overflow: hidden;
	
	.content-container{
		padding: 6px 12px;
		font-size: 14px;
		color: $uni-text-color-placeholder;
		position: relative;
		.item{
			margin: 5px 0;
			view{
				display: inline-block;
				margin-right: 5px;
				color: #101010;
			}
			.info-text{
				color: #333640;
			}
		}
		.msg-time{
			font-size: 12px;
			position: absolute;
			right: 20px;
			bottom: 15px;
		}
		.check-status{
			transform: rotate(45deg);
			transform-origin: right;
			position: absolute;
			right: -25px;
			top: 50px;
			background-color: $uni-color-primary;
			color: #fff;
			width: 130px;
			padding: 5px 0;
			text-align: center;
		}
		
	}
	
}
</style>
